<template>
  <div class="homeWrap">
    <div class="mainWrap">
    <router-view />
    </div>
    <ul class="bottomBar">
      <router-link to="/index/write" tag="li">写日志</router-link>
      <router-link to="/index/read" tag="li">查日志</router-link>
    </ul>
  
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
  mounted() {}
};
</script>
<style lang="scss" >
.homeWrap{
    height:100%;
}
.mainWrap {
    height: calc(100% - 60px);
    overflow:auto;
  }
  .bottomBar {
    height: 60px;
    line-height: 60px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top:1px solid #c7c2c2;
    box-sizing:border-box;
    li {
      width: 50%;
      height: 100%;
      font-size:16px;
      display:flex;
      align-items:center;
      justify-content:center;
     
      color:#8a8a8a;
      &:nth-child(1){
        border-right:1px solid #cccfd3;
        background: url("../img/write.png") no-repeat 25% center / 16px 16px;
        &.router-link-active{
          color: #659cda;
          background: url("../img/write-active.png") no-repeat 25% center / 16px 16px;
        }
      }
       &:nth-child(2){
        border-right:1px solid #cccfd3;
        background: url("../img/log.png") no-repeat 25% center / 16px 16px;
         &.router-link-active{
          color: #659cda;
          background: url("../img/log-active.png") no-repeat 25% center / 16px 16px;
        }
      }
      img{
        width:22px;
        height:22px;
        margin-right:4px;
      }
      
     
    }
     .nut-button.light{
        border-color:#659cda;
      }
     
  }
</style>
